<template>
  <!-- 主页 -->
  <div id="snap-svg" v-visibility-change="change" style="padding: 0; margin: 0; height: 100vh; width: 100%; overflow: hidden">
    <div style="position: absolute">
      <el-button style="cursor:default;">MES {{ MESIsonline ===1 ? "在线" : "离线" }}
        <i class="iconfont el-icon-allocation-yuandian" :style="{color : MESIsonline === 1?'#67C23A':'red'}"></i></el-button>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <template v-if="dialogOption < 2">
        <el-button size="mini" type="success" @click="operateRun(dialogTitle)">运行</el-button>
        <el-button size="mini" type="primary" @click="operateStop(dialogTitle)">停止</el-button>
        <el-button size="mini" type="danger" @click="operateRelieve(dialogTitle)">解除异常</el-button>
        <el-button size="mini" type="info" @click="operateDetails(dialogTitle)">详情</el-button>
        <el-button v-if="errorCode > 0 && errorCode < 3" size="mini" type="danger" @click="operateEmpty(dialogTitle)">处理空取</el-button>
        <el-button v-if="errorCode > 2" size="mini" type="danger" @click="operateDouble(dialogTitle)">处理二重</el-button>
        <el-button size="mini" type="danger" v-show="disableClickShow" @click="disableClick">禁用</el-button>
      </template>
      <template v-if="dialogOption === 2">
        <el-button size="mini" type="primary" @click="isBoundClick">出库模式</el-button>
        <el-button size="mini" type="primary" @click="isBoundClick">入库模式</el-button>
        <h4 v-for="(item,key) in IOPortData" :key="item.name">{{ key }} ： {{ item }}</h4>
      </template>
      <div v-if="particularsclick" style="margin-top: 20px">
        <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
          <span style="width: 150px; display: inline-block">{{ key }}</span> :
          <span style="margin-left: 30px; width: 100px; display: inline-block">{{ item }}</span>
        </p>
      </div>
    </el-dialog>
    <svg id="svg" />
    <!-- <playBack_map_container /> -->

    <!-- 下方功能按钮 -->
    <div id="card">
      <el-row style="padding:0px 5px ">
        <el-slider input-size="mini" :format-tooltip="formatTooltip" :step="1000" v-model="slider" :min="+settingStateTime" :max="+settingEndTime"></el-slider>
      </el-row>
      <el-row style="text-align:center">
        <el-col :span="4" style="text-align: center">
          <el-tooltip content="复位">
            <el-button type="text" color="black" @click.native="handleReset"><i class="iconfont el-icon-aim" style="font-size:24px;"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="4" style="text-align: center">
          <el-tooltip content="图例">
            <el-popover placement="bottom" trigger="click">
              <img src="@/assets/images/tuli.png" alt="">
              <el-button slot="reference" type="text"><i class="el-icon-info" style="font-size:24px;"></i></el-button>
            </el-popover>
          </el-tooltip>
        </el-col>
        <el-col :span="4" style="text-align: center">
          <el-tooltip :content="isfull ? '退出全屏' : '全屏'">
            <el-button type="text" color="black" @click.native="handleChange">
              <i :class="isfull ? 'iconfont el-icon-tuichuquanping' : 'iconfont el-icon-quanping'" style="font-size:24px;"></i>
            </el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-tooltip content="设置">
            <el-button type="text" @click="setting"><i class="iconfont el-icon-shezhi" style="font-size:24px;"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-tooltip content="快退">
            <el-button type="text" @click="backClick"><i class="iconfont el-icon-kuaitui" style="font-size:24px;"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-tooltip :content="StartPause?'开始':'暂停'">
            <el-button v-if="StartPause" type="text" @click="StartClick"><i class="iconfont el-icon-bofang" style="font-size:24px;"></i></el-button>
            <el-button v-else type="text" @click="pauseClick"><i class="iconfont el-icon-zanting" style="font-size:24px;"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-tooltip content="快进">
            <el-button type="text" @click="forwardClick"><i class="iconfont el-icon-kuaijin" style="font-size:24px;"></i></el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
    <!-- 设置按钮的弹窗 -->
    <el-dialog :visible.sync="settingDialog">
      <el-date-picker v-model="settingStateTime" type="datetime" value-format="timestamp" :default-value="new Date()" placeholder="选择开始时间">
      </el-date-picker>
      -
      <el-date-picker v-model="settingEndTime" type="datetime" value-format="timestamp" placeholder="选择结束时间">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="settingConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const signalR = require("@microsoft/signalr");
import { InitSvg, HandleSingalRData, getsingalRData } from "./SvgLayout.js";
import {
  GetDeviceDataApi,
  HandleDeviceOperate,
  UpdateConfigValueApi,
  QueryConfigValue,
} from "@/api/dashboard";
import { updateSubDateApi } from "@/api/task.js";
import { Message } from "element-ui";
import dayjs from "dayjs";
import Snap from "snapsvg-cjs";
import { zpd } from "snap.svg.zpd";
// import playBack_map_container  from './playBack_map_container'
import { GetPlayBackDataApi } from "@/api/playBack";
export default {
  name: "playBack",
  // components:{
  //   playBack_map_container
  // },
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      isActive: true,
      /** 是否显示空取 或者二重按钮 */
      errorCode: 0,
      dialogOption: 0, // 0：输送机，1：堆垛机，2：灯
      /** 是否点击了详情 */
      particularsclick: false,
      /** 详情数据 */
      particularsData: {
        name: "",
        obj: "",
      },
      // MES是否在线
      MESIsonline: 1,
      // 点击的灯的数据
      IOPortData: "",
      //禁用按钮
      disableClickShow: false,
      //功能按钮数据
      isfull1: 50,
      isfull: false,
      temp: 1,
      //进度条
      slider: 0,
      //设置按钮的弹窗
      settingDialog: false,
      //设置弹窗的时间
      settingStateTime: "",
      settingEndTime: "",
      //播放暂停
      StartPause: true,
      //定时器
      timer: "",
    };
  },
  mounted() {
    InitSvg(this);
    // setTimeout(() => {
    //   this.bindSingalRData();
    // }, 500);

    //下方功能按钮
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFullscreen = !!isFullscreen;
    document.addEventListener("fullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
  },
  beforeDestroy() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
  },
  activated() {
    // this.bindSingalRData();
    this.isActive = true;
    console.log("activated");
  },
  deactivated() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
    this.isActive = false;
    console.log("deactivated");
  },
  methods: {
    /** 标签切换事件(v-visibility-change="change") */
    change(evt, hidden) {
      // hidden：false切换回当前页面，true切换到别的页面
      console.log(hidden, this.isActive);
      if (hidden) {
        this.$signalR.off("WcsMoniorData");
        this.$signalR.offPush("PushModeStatus");
      } else {
        if (this.isActive) {
          // this.bindSingalRData();
        }
      }
    },
    /** 绑定后端SingalR数据 */
    bindSingalRData() {
      this.$signalR.on("WcsMoniorData", (data) => {
        const dataObj = JSON.parse(data);
        HandleSingalRData(dataObj);
        // console.log(dataObj,'dataObj');
      });
      this.$signalR.onPush("PushModeStatus", (data) => {
        // console.log('bindSingalRData', data)
      });
    },
    // 运行
    operateRun(deviceName) {
      HandleDeviceOperate(this, deviceName, 3);
    },
    // 停止
    operateStop(deviceName) {
      HandleDeviceOperate(this, deviceName, 4);
    },
    // 解除异常
    operateRelieve(deviceName) {
      HandleDeviceOperate(this, deviceName, 8);
    },
    // 处理空取
    operateEmpty(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 处理二重
    operateDouble(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 详情
    async operateDetails(deviceName) {
      if (!this.particularsclick) {
        const res = await GetDeviceDataApi(deviceName);
        this.particularsData = JSON.parse(res.data.deviceInfo);
        this.particularsclick = true;
      } else {
        this.particularsclick = false;
      }
    },
    //禁用按钮
    disableClick() {
      console.log("禁用按钮");
    },
    // 是否入库出库
    async isBoundClick() {
      alert("未完成需要修改");
      console.log(this.IOPortData, "IOPortData");
      // console.log({ configKey: this.IOPortData.name, configValue: 4 }, '{ configKey: this.IOPortName, configValue: 4 }')
      // if (this.IOPortData.mode) {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 4 })
      //   console.log(res)
      // } else {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 3 })
      //   console.log(res)
      // }
      // Message.success('操作成功')
    },
    //关闭dialog
    closeDialog() {
      this.disableClickShow = false;
    },

    //下方功能按钮
    handleReset() {
      const svg = Snap("#svg");
      svg.zpd(function (_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function (_err, paper3) {
          svg.panTo(0, 0);
        });
      });
    },
    handleFullscreen() {
      const main = document.getElementById("snap-svg");
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        console.log(main.requestFullscreen);
        if (main.requestFullscreen) {
          main.requestFullscreen();
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen();
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen();
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen();
        }
      }
    },
    handleChange() {
      this.handleFullscreen();
    },
    reduce() {
      this.isfull1 -= 1;
    },
    //进度条格式化数据
    formatTooltip(val) {
      return this.formatDate(val);
    },
    //时间格式处理
    formatDate(value, str = "HH:mm:ss") {
      return dayjs(value).format(str);
    },
    //获取当前时间
    defaultValue() {
      return new Date();
    },
    //设置按钮
    setting() {
      this.settingDialog = true;
    },
    //设置按钮的确认
    settingConfirm() {
      console.log(this.settingStateTime, this.settingEndTime);
    },
    //快退按钮
    backClick() {
      if (this.slider <= this.settingStateTime) return;
      this.slider -= 5000;
    },
    //开始按钮
    StartClick() {
      if (this.settingStateTime <= 0) return;
      this.timer = setInterval(async () => {
        this.slider += 1000;
        // console.log({
        //   timeStamp: this.slider,
        //   module: "WcsMoniorData",
        // },'slider');
        const res = await GetPlayBackDataApi({
          timeStamp: this.slider,
          module: "WcsMoniorData",
        });
        console.log(this.slider, JSON.parse(res.data.data));
        let playbackData = JSON.parse(res.data.data);
        HandleSingalRData(playbackData);
        this.MESIsonline = playbackData.mesControlState;
        if (this.slider >= this.settingEndTime) {
          clearInterval(this.timer);
          this.StartPause = true;
        }
      }, 1000);
      this.StartPause = !this.StartPause;
    },
    //暂停按钮
    pauseClick() {
      clearInterval(this.timer);
      this.StartPause = !this.StartPause;
    },
    //快进按钮
    forwardClick() {
      if (this.slider >= this.settingEndTime) return;
      this.slider += 5000;
    },
  },
};
</script>

<style lang="scss" scoped>
#svg {
  width: 100%;
  height: 100%;
  background-color: #100c38;
}
</style>

<style scoped>
#card {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  width: 340px;
  position: fixed;
  left: 45%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>
